<template>
  <div class="container">
    <!-- Category Selector Section -->
    <div class="category-selector">
      <div class="selector-title">选择活动类型</div>
      <el-radio-group v-model="selectedType" @change="fetchActivitiesByType" class="radio-group">
        <el-radio label="身体护理">身体护理</el-radio>
        <el-radio label="出行安全">出行安全</el-radio>
        <el-radio label="医疗健康">医疗健康</el-radio>
        <el-radio label="居家生活">居家生活</el-radio>
        <el-radio label="衣着穿搭">衣着穿搭</el-radio>
      </el-radio-group>
      
      <div class="selector-title">选择适用年龄</div>
      <el-radio-group v-model="selectedAge" @change="fetchActivitiesByAge" class="radio-group">
        <el-radio label="新到家">新到家</el-radio>
        <el-radio label="幼年期">幼年期</el-radio>
        <el-radio label="成年期">成年期</el-radio>
        <el-radio label="老年期">老年期</el-radio>
        <el-radio label="发情期">发情期</el-radio>
        <el-radio label="怀孕期">怀孕期</el-radio>
        <el-radio label="哺乳期">哺乳期</el-radio>
      </el-radio-group>
    </div>

    <!-- Activity List Section -->
    <div class="activity-list">
      <el-table :data="activities" stripe border style="width: 100%">
        <el-table-column prop="activity" label="活动名称"></el-table-column>
        <el-table-column prop="grade" label="活动等级">
          <template #default="{ row }">
            <el-tag :type="row.grade === 1 ? 'danger' : row.grade === 2 ? 'warning' : 'success'">{{ gradeEnum[row.grade] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="活动类型"></el-table-column>
        <el-table-column prop="image" label="活动图片">
          <template #default="{ row }">
            <img :src="row.image" alt="活动图片" class="activity-image">
          </template>
        </el-table-column>
        <el-table-column prop="pet_ages" label="适用年龄">
          <template #default="{ row }">
            <span v-for="(age, index) in row.pet_ages" :key="index">
              {{ age.age }}
              <template v-if="index !== row.pet_ages.length - 1">, </template>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { get } from '@/utils/request';

const species = ref('2');
const activities = ref([]);
const selectedType = ref('身体护理');
const selectedAge = ref('');
const gradeEnum = {
  1: '禁做',
  2: '慎做',
  3: '可以做'
};

onMounted(() => {
  fetchActivitiesByType(selectedType.value);
});

function fetchActivitiesByType(type) {
  selectedAge.value = '';
  const url = `http://127.0.0.1:8000/index/activitytype/?type=${type}&species_id=${species.value}`;
  fetchData(url);
}

function fetchActivitiesByAge(age) {
  selectedType.value = '';
  const url = `http://127.0.0.1:8000/index/activityage/?age=${age}&species_id=${species.value}`;
  fetchData(url);
}

function fetchData(url) {
  get(url).then(result => {
    if (result.data.code === 200) {
      activities.value = result.data.data;
      console.log(activities.value);
    }
  }).catch(err => {
    console.error(err);
  });
}
</script>

<style scoped>
/* Container and Layout */
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
  padding: 20px;
  background-color: #f3f4f6;  /* 浅灰色背景 */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Selector Styling */
.category-selector {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 5px solid #3498db; /* 增加颜色 */
}

.selector-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50; /* 深色字体 */
  margin-bottom: 10px;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-radio {
  font-weight: 500;
  color: #34495e;
}

.el-radio__label {
  padding: 5px;
  transition: background-color 0.3s ease;
}

.el-radio__label:hover {
  background-color: #e6f7ff;  /* 鼠标悬停时的颜色 */
  border-radius: 5px;
}

/* Table and Activity List Styling */
.activity-list {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table {
  background-color: #fafafa;
  border-radius: 10px;
  border-color: #3498db; /* 增加表格边框颜色 */
}

.el-tag {
  border-radius: 4px;
  color: #fff;
}

.el-tag.danger {
  background-color: #c0392b; /* 深红色 */
}

.el-tag.warning {
  background-color: #d35400; /* 深橙色 */
}

.el-tag.success {
  background-color: #27ae60; /* 深绿色 */
}

/* Table Row and Image Styling */
.el-table__row:hover {
  background-color: #f5f5f5;
}

.activity-image {
  max-width: 60px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.activity-image:hover {
  transform: scale(1.1); /* 图片悬停放大效果 */
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}
</style>
